import 'package:flutter/material.dart';
import 'package:get/get.dart';

class BrandBuildingPage extends StatelessWidget {
  const BrandBuildingPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF5F9FF),
      body: SingleChildScrollView(
        child: Container(
          constraints: BoxConstraints(
            minHeight: MediaQuery.of(Get.context!).size.height,
          ),
          child: Column(
            children: [
              // 头部导航

              // 内容容器
              Container(
                width: double.infinity,
                constraints: BoxConstraints(
                  maxWidth: 1200,
                ),
                padding: const EdgeInsets.all(20),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    // 面包屑导航
                    _buildBreadcrumb(),

                    // 页面标题
                    _buildPageTitle(),

                    // 品牌建设介绍
                    _buildIntroSection(),

                    // 服务内容
                    _buildServicesSection(),

                    // 品牌建设流程
                    _buildProcessSection(),

                    // 品牌价值
                    _buildValueSection(),

                    // 案例展示
                    _buildCasesSection(),
                  ],
                ),
              ),

              // 页脚
              _buildFooter(),
            ],
          ),
        ),
      ),
    );
  }

  // 头部导航
  Widget _buildHeader() {
    return Container(
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          colors: [Color(0xFF1E5799), Color(0xFF207CCA)],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          stops: [0.0, 1.0],
        ),
        borderRadius: BorderRadius.vertical(
          bottom: Radius.circular(8),
        ),
        boxShadow: [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 5,
            spreadRadius: 2,
            offset: Offset(0, 5),
          ),
        ],
      ),
      padding: const EdgeInsets.symmetric(vertical: 30),
      child: Container(
        constraints: const BoxConstraints(maxWidth: 1200),
        padding: const EdgeInsets.symmetric(horizontal: 30),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            const Text(
              '创新服务平台',
              style: TextStyle(
                color: Colors.white,
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
            ),
            MediaQuery.of(Get.context!).size.width > 768
                ? _buildDesktopNav()
                : _buildMobileNav(),
          ],
        ),
      ),
    );
  }

  // 桌面导航
  Widget _buildDesktopNav() {
    return Row(
      children: [
        _buildNavItem('首页'),
        _buildNavItem('服务能力'),
        _buildNavItem('品牌建设'),
        _buildNavItem('成功案例'),
        _buildNavItem('联系我们'),
      ],
    );
  }

  // 移动端导航
  Widget _buildMobileNav() {
    return PopupMenuButton<String>(
      icon: const Icon(Icons.menu, color: Colors.white),
      itemBuilder: (context) => [
        const PopupMenuItem(value: '1', child: Text('首页')),
        const PopupMenuItem(value: '2', child: Text('服务能力')),
        const PopupMenuItem(value: '3', child: Text('品牌建设')),
        const PopupMenuItem(value: '4', child: Text('成功案例')),
        const PopupMenuItem(value: '5', child: Text('联系我们')),
      ],
    );
  }

  // 导航项
  Widget _buildNavItem(String text) {
    return Padding(
      padding: const EdgeInsets.only(left: 25),
      child: TextButton(
        onPressed: () {},
        style: TextButton.styleFrom(
          padding: EdgeInsets.zero,
          tapTargetSize: MaterialTapTargetSize.shrinkWrap,
        ),
        child: Text(
          text,
          style: const TextStyle(
            color: Colors.white,
            fontSize: 16,
          ),
        ),
      ),
    );
  }

  // 面包屑导航
  Widget _buildBreadcrumb() {
    return const Padding(
      padding: EdgeInsets.symmetric(vertical: 15),
      child: Text(
        '首页 > 服务能力 > 品牌建设',
        style: TextStyle(
          color: Color(0xFF666666),
          fontSize: 14,
        ),
      ),
    );
  }

  // 页面标题
  Widget _buildPageTitle() {
    return Column(
      children: [
        const Text(
          '品牌建设服务',
          style: TextStyle(
            color: Color(0xFF1E5799),
            fontSize: 32,
            fontWeight: FontWeight.bold,
            height: 1.2,
          ),
        ),
        const SizedBox(height: 20),
        Container(
          width: 100,
          height: 4,
          color: const Color(0xFF207CCA),
        ),
        const SizedBox(height: 40),
        const Text(
          '专业品牌建设解决方案，助力企业打造差异化竞争优势和长期品牌价值',
          style: TextStyle(
            color: Color(0xFF666666),
            fontSize: 18,
            height: 1.8,
          ),
          textAlign: TextAlign.center,
        ),
        const SizedBox(height: 50),
      ],
    );
  }

  // 品牌建设介绍
  Widget _buildIntroSection() {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        boxShadow: const [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 3,
            spreadRadius: 1,
            offset: Offset(0, 3),
          ),
        ],
      ),
      padding: const EdgeInsets.all(40),
      margin: const EdgeInsets.only(bottom: 40),
      child: Column(
        children: [
          MediaQuery.of(Get.context!).size.width > 768
              ? Row(
                  children: [
                    Expanded(child: _buildIntroText()),
                    const SizedBox(width: 40),
                    _buildIntroImage(),
                  ],
                )
              : Column(
                  children: [
                    _buildIntroText(),
                    const SizedBox(height: 20),
                    _buildIntroImage(),
                  ],
                ),
        ],
      ),
    );
  }

  // 介绍文本
  Widget _buildIntroText() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: const [
        Text(
          '品牌建设服务概述',
          style: TextStyle(
            color: Color(0xFF1E5799),
            fontSize: 24,
            fontWeight: FontWeight.bold,
          ),
        ),
        SizedBox(height: 20),
        Text(
          '在竞争激烈的市场环境中，品牌是企业最宝贵的无形资产。我们的品牌建设服务从市场调研入手，深入分析行业趋势和竞争格局，帮助企业明确品牌定位，构建独特的品牌形象和品牌价值体系。',
          style: TextStyle(
            color: Color(0xFF555555),
            fontSize: 16,
            height: 1.8,
          ),
        ),
        SizedBox(height: 20),
        Text(
          '我们拥有一支由品牌战略专家、设计师和营销专家组成的专业团队，采用国际先进的品牌建设方法论，为客户提供从品牌战略规划到落地执行的全流程服务。通过系统化的品牌建设流程，我们助力企业打造具有持久生命力的强势品牌。',
          style: TextStyle(
            color: Color(0xFF555555),
            fontSize: 16,
            height: 1.8,
          ),
        ),
        SizedBox(height: 20),
        Text(
          '我们的品牌建设服务已帮助超过200家企业成功打造品牌，涵盖消费品、科技、金融、教育等多个行业，客户满意度达98%。',
          style: TextStyle(
            color: Color(0xFF555555),
            fontSize: 16,
            height: 1.8,
          ),
        ),
      ],
    );
  }

  // 介绍图片
  Widget _buildIntroImage() {
    return Container(
      width: 500,
      height: 300,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        color: Colors.grey[200],
        boxShadow: const [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 5,
            spreadRadius: 2,
            offset: Offset(0, 5),
          ),
        ],
      ),
      child: const Center(
        child: Text(
          '品牌建设',
          style: TextStyle(color: Colors.grey),
        ),
      ),
    );
  }

  // 服务内容部分
  Widget _buildServicesSection() {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        boxShadow: const [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 3,
            spreadRadius: 1,
            offset: Offset(0, 3),
          ),
        ],
      ),
      padding: const EdgeInsets.all(40),
      margin: const EdgeInsets.only(bottom: 40),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildSectionTitle('我们的服务内容'),
          const SizedBox(height: 10),
          const Text(
            '全方位的品牌建设服务，覆盖品牌全生命周期',
            style: TextStyle(
              color: Color(0xFF666666),
              fontSize: 16,
            ),
          ),
          const SizedBox(height: 30),
          _buildServicesGrid(),
        ],
      ),
    );
  }

  // 服务网格
  Widget _buildServicesGrid() {
    return GridView.count(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      crossAxisCount: MediaQuery.of(Get.context!).size.width > 768 ? 2 : 1,
      crossAxisSpacing: 30,
      mainAxisSpacing: 30,
      childAspectRatio: 1.5,
      children: [
        _buildServiceCard(
            '🎯', '品牌战略规划', '基于市场分析和企业战略，制定品牌定位、核心价值和差异化策略，构建品牌发展蓝图。'),
        _buildServiceCard(
            '🏷️', '品牌命名与口号', '创意命名和口号设计，确保品牌名称易记、独特且能准确传达品牌价值主张。'),
        _buildServiceCard(
            '🎨', '品牌视觉识别系统', '设计品牌标志、色彩系统、字体系统和视觉元素，构建统一的品牌视觉形象。'),
        _buildServiceCard(
            '📢', '品牌传播策略', '制定整合营销传播计划，包括广告、公关、数字营销等，提升品牌知名度和美誉度。'),
        _buildServiceCard(
            '🌟', '品牌体验设计', '设计线上线下品牌接触点的用户体验，确保品牌承诺在各个触点得到一致体现。'),
        _buildServiceCard('📈', '品牌资产管理', '建立品牌资产监测体系，评估品牌健康度，持续优化品牌建设策略。'),
      ],
    );
  }

  // 服务卡片
  Widget _buildServiceCard(String icon, String title, String description) {
    return Container(
      decoration: BoxDecoration(
        color: const Color(0xFFF9FBFF),
        borderRadius: BorderRadius.circular(8),
        border: Border.all(color: const Color(0xFFE0E9FF)),
      ),
      padding: const EdgeInsets.all(30),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            icon,
            style: const TextStyle(fontSize: 48),
          ),
          const SizedBox(height: 20),
          Text(
            title,
            style: const TextStyle(
              color: Color(0xFF1E5799),
              fontSize: 20,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 15),
          Text(
            description,
            style: const TextStyle(
              color: Color(0xFF666666),
              fontSize: 15,
              height: 1.7,
            ),
          ),
          SizedBox(
            height: 20,
          ),
          ElevatedButton(
            onPressed: () {},
            style: ElevatedButton.styleFrom(
              backgroundColor: const Color(0xFF1E5799),
              padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(4),
              ),
            ),
            child: const Text(
              '了解详情',
              style: TextStyle(
                color: Colors.white,
                fontSize: 14,
              ),
            ),
          ),
        ],
      ),
    );
  }

  // 品牌建设流程部分
  Widget _buildProcessSection() {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        boxShadow: const [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 3,
            spreadRadius: 1,
            offset: Offset(0, 3),
          ),
        ],
      ),
      padding: const EdgeInsets.all(40),
      margin: const EdgeInsets.only(bottom: 40),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildSectionTitle('品牌建设流程'),
          const SizedBox(height: 10),
          const Text(
            '科学严谨的品牌建设流程，确保品牌战略有效落地',
            style: TextStyle(
              color: Color(0xFF666666),
              fontSize: 16,
            ),
          ),
          const SizedBox(height: 40),
          _buildProcessSteps(),
        ],
      ),
    );
  }

  // 流程步骤
  Widget _buildProcessSteps() {
    return MediaQuery.of(Get.context!).size.width > 768
        ? _buildHorizontalProcessSteps()
        : _buildVerticalProcessSteps();
  }

  // 水平流程步骤
  Widget _buildHorizontalProcessSteps() {
    return Stack(
      children: [
        // 连接线
        Positioned(
          top: 30,
          left: 0,
          right: 0,
          height: 3,
          child: Container(
            decoration: const BoxDecoration(
              gradient: LinearGradient(
                colors: [Color(0xFF207CCA), Color(0xFF1E5799)],
              ),
            ),
          ),
        ),
        // 步骤
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            _buildProcessStep(1, '市场调研', '分析行业趋势、竞争格局和目标受众'),
            _buildProcessStep(2, '品牌定位', '确定品牌差异化定位和核心价值主张'),
            _buildProcessStep(3, '创意设计', '开发品牌名称、标志和视觉识别系统'),
            _buildProcessStep(4, '传播规划', '制定整合营销传播策略和执行计划'),
            _buildProcessStep(5, '落地实施', '执行品牌传播活动，监测品牌表现'),
          ],
        ),
      ],
    );
  }

  // 垂直流程步骤
  Widget _buildVerticalProcessSteps() {
    return Column(
      children: [
        _buildProcessStep(1, '市场调研', '分析行业趋势、竞争格局和目标受众'),
        const SizedBox(height: 30),
        _buildProcessStep(2, '品牌定位', '确定品牌差异化定位和核心价值主张'),
        const SizedBox(height: 30),
        _buildProcessStep(3, '创意设计', '开发品牌名称、标志和视觉识别系统'),
        const SizedBox(height: 30),
        _buildProcessStep(4, '传播规划', '制定整合营销传播策略和执行计划'),
        const SizedBox(height: 30),
        _buildProcessStep(5, '落地实施', '执行品牌传播活动，监测品牌表现'),
      ],
    );
  }

  // 流程步骤项
  Widget _buildProcessStep(int number, String title, String description) {
    return MediaQuery.of(Get.context!).size.width > 768
        ? Column(
            children: [
              _buildStepNumber(number),
              const SizedBox(height: 15),
              Text(
                title,
                style: const TextStyle(
                  color: Color(0xFF1E5799),
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 10),
              Text(
                description,
                style: const TextStyle(
                  color: Color(0xFF666666),
                  fontSize: 14,
                ),
                textAlign: TextAlign.center,
              ),
            ],
          )
        : Row(
            children: [
              _buildStepNumber(number),
              const SizedBox(width: 20),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      title,
                      style: const TextStyle(
                        color: Color(0xFF1E5799),
                        fontSize: 16,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    const SizedBox(height: 10),
                    Text(
                      description,
                      style: const TextStyle(
                        color: Color(0xFF666666),
                        fontSize: 14,
                      ),
                    ),
                  ],
                ),
              ),
            ],
          );
  }

  // 步骤数字
  Widget _buildStepNumber(int number) {
    return Container(
      width: 60,
      height: 60,
      decoration: BoxDecoration(
        color: const Color(0xFF207CCA),
        borderRadius: BorderRadius.circular(30),
        boxShadow: const [
          BoxShadow(
            color: Color(0x331E5799),
            blurRadius: 5,
            spreadRadius: 1,
            offset: Offset(0, 5),
          ),
        ],
      ),
      child: Center(
        child: Text(
          number.toString(),
          style: const TextStyle(
            color: Colors.white,
            fontSize: 24,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }

  // 品牌价值部分
  Widget _buildValueSection() {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [Color(0xFF1E5799), Color(0xFF207CCA)],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
        borderRadius: BorderRadius.circular(8),
      ),
      padding: const EdgeInsets.fromLTRB(40, 60, 40, 60),
      margin: const EdgeInsets.only(bottom: 40),
      child: Column(
        children: [
          const Text(
            '品牌建设的核心价值',
            style: TextStyle(
              color: Colors.white,
              fontSize: 28,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 40),
          _buildValueGrid(),
        ],
      ),
    );
  }

  // 价值网格
  Widget _buildValueGrid() {
    return GridView.count(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      crossAxisCount: MediaQuery.of(Get.context!).size.width > 768 ? 4 : 2,
      crossAxisSpacing: 30,
      mainAxisSpacing: 30,
      childAspectRatio: 1.0,
      children: [
        _buildValueItem('💰', '提升品牌溢价', '强势品牌能够获得更高的产品溢价和利润率'),
        _buildValueItem('🤝', '增强客户忠诚', '良好的品牌形象能够建立客户情感连接，提高复购率'),
        _buildValueItem('🛡️', '抵御市场风险', '强势品牌能够更好地应对市场竞争和经济波动'),
        _buildValueItem('📈', '促进业务增长', '品牌建设能够支持企业业务拓展和多元化发展'),
      ],
    );
  }

  // 价值项
  Widget _buildValueItem(String icon, String title, String description) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white10,
        borderRadius: BorderRadius.circular(8),
      ),
      padding: const EdgeInsets.all(30),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            icon,
            style: const TextStyle(
              color: Colors.white,
              fontSize: 40,
            ),
          ),
          const SizedBox(height: 20),
          Text(
            title,
            style: const TextStyle(
              color: Colors.white,
              fontSize: 20,
              fontWeight: FontWeight.bold,
            ),
            textAlign: TextAlign.center,
          ),
          const SizedBox(height: 15),
          Text(
            description,
            style: const TextStyle(
              color: Colors.white70,
              fontSize: 14,
            ),
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }

  // 案例展示部分
  Widget _buildCasesSection() {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        boxShadow: const [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 3,
            spreadRadius: 1,
            offset: Offset(0, 3),
          ),
        ],
      ),
      padding: const EdgeInsets.all(40),
      margin: const EdgeInsets.only(bottom: 40),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildSectionTitle('成功案例'),
          const SizedBox(height: 10),
          const Text(
            '我们已为众多企业提供了专业的品牌建设服务',
            style: TextStyle(
              color: Color(0xFF666666),
              fontSize: 16,
            ),
          ),
          const SizedBox(height: 30),
          _buildCasesGrid(),
        ],
      ),
    );
  }

  // 案例网格
  Widget _buildCasesGrid() {
    return GridView.count(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      crossAxisCount: MediaQuery.of(Get.context!).size.width > 768 ? 3 : 1,
      crossAxisSpacing: 30,
      mainAxisSpacing: 30,
      childAspectRatio: 1.5,
      children: [
        _buildCaseCard(
            '科技品牌案例', '某科技企业品牌升级', '为科技企业提供全面的品牌战略规划和视觉识别系统设计，助力品牌形象升级。'),
        _buildCaseCard('消费品案例', '新消费品牌创建', '从品牌命名、定位到视觉设计，为新兴消费品企业打造差异化品牌形象。'),
        _buildCaseCard('金融案例', '金融机构品牌重塑', '帮助传统金融机构重塑品牌形象，提升在年轻消费群体中的品牌认知。'),
      ],
    );
  }

  // 案例卡片
  Widget _buildCaseCard(String imageText, String title, String description) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        boxShadow: const [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 5,
            spreadRadius: 1,
            offset: Offset(0, 5),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Expanded(
            flex: 2,
            child: Container(
              color: Colors.grey[200],
              child: Center(
                child: Text(
                  imageText,
                  style: const TextStyle(color: Colors.grey),
                ),
              ),
            ),
          ),
          Expanded(
            flex: 3,
            child: Container(
              padding: const EdgeInsets.all(20),
              color: Colors.white,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    title,
                    style: const TextStyle(
                      color: Color(0xFF1E5799),
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SizedBox(height: 10),
                  Text(
                    description,
                    style: const TextStyle(
                      color: Color(0xFF666666),
                      fontSize: 14,
                    ),
                  ),
                  const SizedBox(height: 15),
                  TextButton(
                    onPressed: () {},
                    style: TextButton.styleFrom(
                      padding: EdgeInsets.zero,
                      tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                    ),
                    child: const Text(
                      '查看详情 →',
                      style: TextStyle(
                        color: Color(0xFF207CCA),
                        fontWeight: FontWeight.bold,
                        fontSize: 14,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  // 页脚
  Widget _buildFooter() {
    return Container(
      width: double.infinity,
      decoration: const BoxDecoration(
        color: Color(0xFF1A1A2E),
        borderRadius: BorderRadius.vertical(
          top: Radius.circular(8),
        ),
      ),
      padding: const EdgeInsets.all(40),
      margin: const EdgeInsets.only(top: 50),
      child: Column(
        children: [
          // 页脚链接
          Wrap(
            alignment: WrapAlignment.center,
            spacing: 40,
            children: [
              _buildFooterLink('关于我们'),
              _buildFooterLink('服务条款'),
              _buildFooterLink('隐私政策'),
              _buildFooterLink('帮助中心'),
              _buildFooterLink('联系我们'),
            ],
          ),
          const SizedBox(height: 20),
          const Text(
            '© 2025 创新服务平台 版权所有',
            style: TextStyle(
              color: Colors.white,
              fontSize: 14,
            ),
          ),
          const SizedBox(height: 10),
          const Text(
            '地址：XX省XX市XX区XX路XX号 | 服务热线：400-123-4567 | 邮箱：brand@innovationservice.com',
            style: TextStyle(
              color: Colors.white,
              fontSize: 14,
            ),
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }

  // 页脚链接
  Widget _buildFooterLink(String text) {
    return TextButton(
      onPressed: () {},
      style: TextButton.styleFrom(
        padding: EdgeInsets.zero,
        tapTargetSize: MaterialTapTargetSize.shrinkWrap,
      ),
      child: Text(
        text,
        style: const TextStyle(
          color: Color(0xFFA8B2D1),
          fontSize: 14,
        ),
      ),
    );
  }

  // 通用的章节标题
  Widget _buildSectionTitle(String title) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          title,
          style: const TextStyle(
            color: Color(0xFF1E5799),
            fontSize: 24,
            fontWeight: FontWeight.bold,
          ),
        ),
        const SizedBox(height: 15),
        Container(
          height: 2,
          width: double.infinity,
          color: const Color(0xFFF0F0F0),
          child: FractionallySizedBox(
            widthFactor: 80 / 1200, // 80px宽度相对于1200px容器
            child: Container(
              color: const Color(0xFF207CCA),
            ),
          ),
        ),
      ],
    );
  }
}
